import React from "react";
import { Form, Input, Button, Checkbox, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { Logo } from "../../api/home.js";
import { connect } from "react-redux"; //连接store
import { UserActive } from "../../store/actives/actives.js"; // 修改store值
import "./scss/login.scss";
import Circle from "./canvas";
import cookie from "react-cookies"; // 引入cookie
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const Login = (props) => {
  const onFinish = (values) => {
    Logo(values).then(async (res) => {
      if (res.code == 2000) {
        let inFifteenMinutes = new Date(
          new Date().getTime() + 72 * 3600 * 1000
        ); //三天
        cookie.save("userId", res.token, { expires: inFifteenMinutes });
        message.success(res.msg);
        await props.dispatch_login(res);
        props.history.replace({
          pathname: "/",
          state: res.visitList[0],
        });
        // 存储cookie
        // cookie.save("userToken", res.token);
        // cookie.load('userId')  取数据
        // cookie.remove('userId')  删除
        // 设置失效时间
        //         let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000);//一天
        // cookie.save('userId', "123",{ expires: inFifteenMinutes });
      } else {
        message.error(res.msg);
      }
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:");
  };

  return (
    <div className="cx_login">
      <Circle />
      <Form
        {...layout}
        name="basic"
        initialValues={{
          remember: false,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <div className="login_title">
          <h3>南京鼓楼医院后台管理</h3>
        </div>
        <div className="formBox">
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "请输入您的用户名",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号"
              autoComplete="off"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入您的密码",
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请输入密码"
            />
          </Form.Item>

          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox className="remember">记住密码</Checkbox>
          </Form.Item>

          <Form.Item {...tailLayout} className="login">
            <Button type="primary" htmlType="submit">
              登陆
            </Button>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
};
// 映射到状态
const mapStateToProps = (state) => {
  return {
    prop: state.prop,
  };
};
// 映射派发动作
const mapDispatchToProps = (dispatch) => {
  return {
    dispatch_login: (data) => {
      dispatch(UserActive(data));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
